<!-- ========== Topbar Start ========== -->
<div class="navbar-custom" id="header">
  <div class="topbar">
    <div class="topbar-menu d-flex align-items-center gap-lg-2 gap-1">
      <!-- Brand Logo -->
      <div class="logo-box">
        <!-- Brand Logo Light -->
        <a href="#/Home" class="logo-light">
          <img src="{{logoPath1}}" alt="logo" class="logo-lg" height="22" />
          <img
            src="{{logoPath2}}"
            alt="small logo"
            class="logo-sm"
            height="22"
          />
        </a>

        <!-- Brand Logo Dark -->
        <a href="#/Home" class="logo-dark">
          <img
            src="../../assets/images/logo-dark.png"
            alt="dark logo"
            class="logo-lg"
            height="22"
          />
          <img
            src="{{logoPath1}}"
            alt="small logo"
            class="logo-sm"
            height="22"
          />
        </a>
      </div>

      <!-- Sidebar Menu Toggle Button -->
      <button class="button-toggle-menu">
        <i class="mdi mdi-menu"></i>
      </button>
    </div>

    <ul class="topbar-menu d-flex align-items-center gap-4">
      <li class="dropdown">
        <a
          class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
          data-bs-toggle="dropdown"
          href="#"
          role="button"
          aria-haspopup="false"
          aria-expanded="false"
        >
          <i class="mdi mdi-magnify font-size-24"></i>
        </a>
        <div
          class="dropdown-menu dropdown-menu-animated dropdown-menu-end dropdown-lg p-0"
        >
          <form class="p-3">
            <input
              type="search"
              class="form-control"
              placeholder="Search ..."
              aria-label="Recipient's username"
            />
          </form>
        </div>
      </li>

      <li class="dropdown notification-list">
        <a
          class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
          data-bs-toggle="dropdown"
          href="#"
          role="button"
          aria-haspopup="false"
          aria-expanded="false"
        >
          <i class="mdi mdi-bell font-size-24"></i>
          <span class="badge bg-danger rounded-circle noti-icon-badge"
            >{{unreadCount}}</span
          >
        </a>
        <div
          class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"
        >
          <div
            class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"
          >
            <div class="row align-items-center">
              <div class="col">
                <h6 class="m-0 font-size-16 fw-semibold">Notification</h6>
              </div>
              <div class="col-auto">
                <a
                  href="javascript: void(0);"
                  class="text-dark text-decoration-underline"
                >
                  <small>Clear All</small>
                </a>
              </div>
            </div>
          </div>

          <div class="px-1" style="max-height: 300px" data-simplebar>
            {{notifications}}
          </div>
          <!-- All-->
          <a
            href="javascript:void(0);"
            class="dropdown-item text-center text-primary notify-item border-top border-light py-2"
          >
            View All
          </a>
        </div>
      </li>

      <li class="dropdown">
        <a
          class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light"
          data-bs-toggle="dropdown"
          href="#"
          role="button"
          aria-haspopup="false"
          aria-expanded="false"
        >
          <img src="{{user.avatar}}" alt="user-image" class="rounded-circle" />
          <span class="ms-1 d-none d-md-inline-block">
            {{user.username}}
            <i class="mdi mdi-chevron-down"></i>
          </span>
        </a>
        <div class="dropdown-menu dropdown-menu-end profile-dropdown">
          <!-- item-->
          <div class="dropdown-header noti-title">
            <h6 class="text-overflow m-0">欢迎 !</h6>
          </div>

          <!-- item-->
          <a href="#/myaccount" class="dropdown-item notify-item">
            <i class="fe-user"></i>
            <span>我的信息</span>
          </a>

          <div class="dropdown-divider"></div>

          <!-- item-->
          <a href="#/login" class="dropdown-item notify-item">
            <i class="fe-log-out"></i>
            <span>注销</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</div>
<!-- ========== Topbar End ========== -->
